<template>
  <Head title="优惠券中心" />
  <ShopLayout>
    <div class="bg-gray-50 min-h-screen">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题 -->
        <div class="mb-8">
          <h1 class="text-3xl font-bold text-gray-900">优惠券中心</h1>
          <p class="mt-2 text-sm text-gray-600">领取专属优惠券，享受更多优惠</p>
        </div>

        <!-- 筛选器 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
          <div class="flex flex-wrap gap-4">
            <div class="flex-1 min-w-0">
              <label class="block text-sm font-medium text-gray-700 mb-2">优惠券类型</label>
              <select v-model="filters.type" @change="applyFilters" 
                      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                <option value="">全部类型</option>
                <option value="fixed">立减券</option>
                <option value="percentage">折扣券</option>
                <option value="free_shipping">包邮券</option>
                <option value="threshold">满减券</option>
              </select>
            </div>
            
            <div class="flex-1 min-w-0">
              <label class="block text-sm font-medium text-gray-700 mb-2">适用范围</label>
              <select v-model="filters.applies_to" @change="applyFilters"
                      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                <option value="">全部范围</option>
                <option value="all">全场通用</option>
                <option value="category">指定分类</option>
                <option value="product">指定商品</option>
              </select>
            </div>
            
            <div class="flex items-end">
              <button @click="resetFilters" 
                      class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2">
                重置筛选
              </button>
            </div>
          </div>
        </div>

        <!-- 优惠券列表 -->
        <div v-if="coupons.data.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <CouponCard
            v-for="coupon in coupons.data"
            :key="coupon.id"
            :coupon="coupon"
            :user-coupon="coupon.user_coupons?.[0]"
            :can-receive="coupon.can_receive"
            :reason="coupon.receive_reason"
            :has-received="coupon.has_received"
            action-type="receive"
            @receive="handleReceive"
          />
        </div>

        <!-- 空状态 -->
        <div v-else class="text-center py-20">
          <svg class="w-24 h-24 mx-auto mb-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-12" />
          </svg>
          <h3 class="text-xl font-medium text-gray-900 mb-2">暂无优惠券</h3>
          <p class="text-gray-500">当前没有可领取的优惠券</p>
        </div>

        <!-- 分页 -->
        <div v-if="coupons.data.length > 0" class="mt-8 flex justify-center">
          <Pagination :links="coupons.links" />
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Head, router } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'
import CouponCard from '@/Components/CouponCard.vue'
import Pagination from '@/Components/Pagination.vue'

const props = defineProps({
  coupons: Object,
  filters: Object
})

const filters = ref({
  type: props.filters.type || '',
  applicable_type: props.filters.applicable_type || ''
})

// 应用筛选
const applyFilters = () => {
  router.get(route('coupons.index'), filters.value, {
    preserveState: true,
    replace: true
  })
}

// 重置筛选
const resetFilters = () => {
  filters.value = {
    type: '',
    applicable_type: ''
  }
  applyFilters()
}

// 处理领取优惠券
const handleReceive = (couponId) => {
  router.post(route('coupons.receive', couponId), {}, {
    onSuccess: () => {
      // 可以添加成功提示
    },
    onError: (errors) => {
      // 可以添加错误提示
      console.error('领取失败:', errors)
    }
  })
}

// 监听筛选变化
watch(filters, () => {
  applyFilters()
}, { deep: true })
</script>
